<template>
    <div class="tech-special-ad">
        <Swipe :autoplay="3000" indicator-color="white">
            <SwipeItem  v-for="(item, i) in bannerList" :key="i">
                <img class="swipe-ad-item" v-lazy="item.picture" :alt="item.name" @click="() => gotoAdPage(item)">
            </SwipeItem>
        </Swipe>
    </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem, Lazyload } from 'vant';
import { NAV_REDIRECT } from '@constants/types';
import { redirectTo } from '@common/utils';
Vue.use(Lazyload);

import logger from '@common/logger';

export default {
    name: 'SpecialAd', // 广告
    components: {
        Swipe,
        SwipeItem,
    },
    props: {
        bannerList: {
            type: Array,
            default: () => [],
        },
        storeId: {
            type: [String, Number],
            default: 0,
        },
    },
    methods: {
        // 广告跳转
        gotoAdPage(item) {
            const { storeId } = this.$props;
            logger.info('专场页面 => AdClick', item);
            redirectTo(NAV_REDIRECT[item.navType], {
                goodsIds: item.goodsIds.join(','),
                title: item.name,
                storeId,
            });
        },
    },
};
</script>

<style lang="less">
.tech-special-ad {
    background-color: @white;
    .m-h(@gap-md);
    .m-v(@gap-sm);
    border-radius: 9px;
    overflow: hidden;
    height: 137px;
    .swipe-ad-item {
        height: 137px;
        width: 100%;
    }
}
</style>
